<!--
 * @Descripttion: 
 * @version: 1.0.0
 * @Author: 孙立政
 * @Date: 2021-12-17 10:13:09
 * @LastEditors: 孙立政
 * @LastEditTime: 2021-12-17 10:42:27
-->
<template>
  <div class="tab">
    <ul>
      <li :class="tabindex == 0 ? 'in-tab' : ''" @click="tabindex = 0">猜你喜欢</li>
      <li :class="tabindex == 1 ? 'in-tab' : ''" @click="tabindex = 1">丰盛午餐</li>
      <li :class="tabindex == 2 ? 'in-tab' : ''" @click="tabindex = 2">休闲生活</li>
      <li :class="tabindex == 3 ? 'in-tab' : ''" @click="tabindex = 3">严选好货</li>
    </ul>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'

const tabindex = ref(0)
</script>

<style lang="scss" scoped>
.tab {
  width: 710px;
  margin: 0 auto;
  margin-top: 30px;
  height: 60px;
  line-height: 60px;
  ul {
    display: flex;
    justify-content: space-between;
    font-size: 29px;
    li {
      width: 25%;
      text-align: center;
      color: #2e2e2e;
    }
    .in-tab {
      font-size: 35px;
      font-family: PingFangSC-Medium;
      color: #222222;
    }
  }
}
</style>
